<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue组件 - $emit</title>
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="Application">
      <my-alert @myclick="appfunc" title="按钮1"/></my-alert>
      <my-alert @myclick="appfunc" title="按钮2"></my-alert>
    </div>
  </body>

  <script>
    const App=Vue.createApp({
        methods:{
            appfunc(param){
                console.log("点击了自定义组件-"+param)
            }
        }
    })
    /****
    const alertComponent= {
      props:["title"],
      //不要少写内嵌单引号
      template:`<div><button @click="$emit('myclick',title)">{{title}}</button></div>`,
    }
    ***/
    const alertComponent= {
      props:["title"],
      methods:{
        click(){
            console.log("组件内逻辑")
            this.$emit("myclick",this.title)
        }
      },
      template:`<div><button @click="click">{{title}}</button></div>`
    }
    App.component("my-alert",alertComponent)
    App.mount("#Application")
  </script>

</html>